<!--
 * @Descripttion: 今日劳动力作业概况
 * @version: 
 * @Author: ada.wu
 * @Date: 2025-06-25 23:48:14
 * @LastEditors: ada.wu
 * @LastEditTime: 2025-07-18 17:34:29
-->
<!-- css/amap.css -->

<head>
    <link rel="stylesheet" href="/assets/css/amap.css" media="all">
</head>
<style>
    .road-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
        color: #000000d9;
        font-size: 14px;
        margin-bottom: 4px;
    }


    #road-list {
        height: calc(100vh - 280px);
    }

    .total-map {
        height: calc(100vh - 140px);
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div class="section">
            <div class="solid ">
                <div class="layui-row">
                    <div class="layui-col-md3">
                        <div class="p-4">
                            <div class="flex-middle justify-between">
                                <div class="layui-font-16 font-weight">监控视频</div>
                                <div>
                                    <span class="layui-icon layui-icon-add-circle"></span>
                                </div>
                            </div>
                        </div>

                        <hr class="m-0" />
                        <div class="mt-3 px-4">
                            <div class="layui-input-group  w100">
                                <input type="text" placeholder="请输入名称搜索" class="layui-input" id="searchInput" />
                                <div class="layui-input-split layui-input-suffix anticon" id="searchBtn">
                                    <i class="layui-icon layui-icon-search"></i>
                                </div>
                            </div>
                        </div>
                        <!-- 列表区域 -->
                        <div class="y-scroll m-4">

                            <div id="ID-tree-demo-showCheckbox"></div>



                        </div>

                    </div>
                    <div class="layui-col-md9">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>



    layui.use(['form', 'miniPage', 'miniAMap'], function () {
        var $ = layui.$,
            element = layui.element,
            layer = layui.layer,
            util = layui.util,
            tree = layui.tree,
            miniAMap = layui.miniAMap;

        /******************** 事件 start ********************/

        // 模拟数据
        var data = [
            {
                title: 'IPC巡逻车摄像头',
                id: 1,
                children: [
                    {
                        title: '京AC01691-AI巡逻车摄像头', id: 5
                    },
                    {
                        title: '京AC61380-AI巡逻车摄像头', id: 6
                    },
                    {
                        title: '京AC75609-AI巡逻车摄像头', id: 7,checked: true
                    }
                ]
            }
        ];
        // 渲染
        tree.render({
            elem: '#ID-tree-demo-showCheckbox',
            data: data,
            showCheckbox: true,
            // edit: ['add', 'update', 'del'] // 开启节点的右侧操作图标
        });



        /******************** 事件 end ********************/

        /******************** 搜索 start ********************/
        $('#searchBtn').on('click', function () {
            var keyword = $('#searchInput').val().trim(); // 去除前后空格
            if (keyword) {
                console.log('搜索关键词:', keyword);
                filterRoadItems(keyword)
                // 执行搜索逻辑
            } else {
                layer.msg('请输入搜索内容');
            }
        });

        function filterRoadItems(keyword) {

        }
        /******************** 搜索 end ********************/



    })
</script>